import { Breadcrumb, Input, Row, Col, Dropdown, Button, Checkbox, } from "antd"
import { CSSProperties, useRef, useState } from "react"
import { SearchOutlined, FunnelPlotOutlined, SortAscendingOutlined } from '@ant-design/icons'
import { CustomIcon, TipTapEditor } from "../../components";
import styles from './index.module.less'
import { Title } from "../../components"
import CodeHighlighter from "../../components/CodeHighlighter";
const Notes = () => {

    const [inputVisible, setInputVisible] = useState<boolean>(false);
    const inputRef: any = useRef(null);


    const [dataSource] = useState([
        {
            key: '1',
            title: 'Ant Design Title 1',
            content: `<p>试着去尝试一个任务列表：</p><ul data-type="taskList"><li data-checked="true" data-type="taskItem"><label><input type="checkbox" checked="checked"><span></span></label><div><p>Hello world</p></div></li><li data-checked="true" data-type="taskItem"><label><input type="checkbox" checked="checked"><span></span></label><div><p>去编写一个笔记</p></div></li><li data-checked="true" data-type="taskItem"><label><input type="checkbox" checked="checked"><span></span></label><div><p>去健身</p></div></li><li data-checked="false" data-type="taskItem"><label><input type="checkbox"><span></span></label><div><p>去阅读一本书</p></div></li></ul>`,
        },
        {
            key: '3',
            title: 'Ant Design Title 1',
            content: `<h2>Hello 轻笔 ✍️</h2>
            <p>这是一个轻量的、适合年轻的你的 
            <em>个人笔记</em> 
            它的名字是 <strong>轻笔</strong>. 
            当然，你可能会期望从文本编辑器中获得各种基本的文本样式。</p>
            <p>它支持markdown语法</p>
            <p>它也支持emoji表情😊😂😈</p>
            <p>如下面的列表：</p>
            <ul><li><p>That’s a bullet list with one …</p></li>
            <li>
            <p>… or two list items.</p>
            </li>
            </ul>
            <p>我们也可以尝试添加一个代码块:</p>
            <pre><code class="language-css">body {
                display: none;
                }</code></pre>
                <p>试着去尝试一个任务列表：</p>
                <ul data-type="taskList">
                <li data-checked="true" data-type="taskItem"><label><input type="checkbox" checked="checked"><span>
                </span></label>
                <div><p>Hello world</p></div>
                </li><li data-checked="true" data-type="taskItem"><label><input type="checkbox" checked="checked"><span></span></label>
                <div><p>去编写一个笔记</p></div>
                </li><li data-checked="true" data-type="taskItem"><label><input type="checkbox" checked="checked"><span></span></label>
                <div><p>去健身</p></div></li><li data-checked="false" data-type="taskItem"><label><input type="checkbox"><span></span></label><div><p>去阅读一本书</p></div></li></ul><p>去写一个引用：</p>
                <blockquote><p>Wow, that’s amazing. Good work, boy! 👏 <br>— Mom</p>
                </blockquote>`,
        },
        {
            key: '2',
            title: 'Ant Design Title 1',
            content: `<h2>
            Hello 轻笔 ✍️
          </h2>
          <p>
            这是一个轻量的、适合年轻的你的 <em>个人笔记</em> 它的名字是 <strong>轻笔</strong>. 当然，你可能会期望从文本编辑器中获得各种基本的文本样式。
          </p>
          <p>
            它支持markdown语法
          </p>
          <pre><code class="language-css">body {
            display: none;
            }</code></pre>
          <p>
            它也支持emoji表情😊😂😈
          </p>`,
        },
        
    ])
    const [editingKeys, setEditingKeys] = useState<string[]>([]);
    
    const isEditing = (item: any) => editingKeys.find((key) => key === item.key);
    const items = [
        {
            key: 'content_created_at',
            label: '创建时间排序',
            onClick: () => {

            },
        },
        {
            key: 'content_updated_at',
            label: '更新时间排序',
            onClick: () => {

            },
        }
    ]
    const toggleInputVisibility = () => {
        setInputVisible((prev) => !prev);
        if (inputRef.current) {
            inputRef.current.focus();
        }
    };
    const iconStyle: CSSProperties = {
        fontSize: '17px',
        marginRight: '1rem',
    }
    const inputStyle: CSSProperties = {
        width: inputVisible ? 200 : 0,
        position: 'relative',
        marginRight: -16,
        opacity: inputVisible ? 1 : 0,
        pointerEvents: inputVisible ? 'auto' : 'none'
    }

    return (
        <div className={styles.notes}>
            <Row wrap={false}>
                <Col style={{ minWidth: 350 }} span={10}>
                    <div className={styles.leftBox}>
                        <Breadcrumb>
                            <Breadcrumb.Item><Title title={'小记'} level={4} /></Breadcrumb.Item>
                        </Breadcrumb>
                        <div>
                            <TipTapEditor  getEditHTML={ (str: string) => { console.log(str)}} style={{maxHeight: '80vh',minHeight: '350px'}} />
                            <div className={styles.boxStyle1}>
                                <div className={styles.boxStyle2} />
                            </div>
                        </div>
                        <Button onClick={() => { }} style={{ marginTop: '2.5rem' }}>小记一下</Button>
                    </div>
                </Col>
                <Col span={14}>
                    <div className={styles.rightBox}>
                        <div>
                            <Input
                                prefix={<SearchOutlined />}
                                allowClear
                                ref={inputRef}
                                onBlur={() => setInputVisible(false)}
                                // onPressEnter={}// 回车
                                placeholder="搜索"
                                style={inputStyle}
                            />
                            <SearchOutlined onClick={toggleInputVisibility} style={iconStyle} />
                            <FunnelPlotOutlined style={iconStyle} />
                            <Dropdown
                                menu={{
                                    items,
                                    // selectable: true,
                                    onSelect: () => { },
                                    selectedKeys: ['content_created_at']
                                }}
                                placement="top"
                            >
                                <SortAscendingOutlined style={iconStyle} />
                            </Dropdown>
                        </div>
                        <Checkbox.Group className={styles.cardCheckBox} onChange={() => { }}>
                            <div style={{ width: '100%' }}>
                                {dataSource.map((item: any) => {
                                    return <div key={item.key} className={styles.tableBox}>
                                        <Checkbox className={styles.checkItem} value="A" />
                                        <div onDoubleClick={() => { setEditingKeys((pre) => [...pre, item.key]) }} className={styles.tableItem}>
                                            {!isEditing(item) ? <div>
                                                <span className={styles.updataTime}>更新于 00-00 00:00</span>
                                                <CodeHighlighter style={{fontSize: 16}} htmlString={item.content}/>
                                            </div> :
                                                <div>
                                                    <TipTapEditor content={item.content} />
                                                    <Button onClick={() => {
                                                        setEditingKeys((pre) => pre.filter((key) => key !== item.key));
                                                    }} icon={<CustomIcon str='check-fill' />} style={{ marginTop: '1rem' }}>完成</Button>
                                                </div>
                                            }
                                        </div>
                                        <Button onClick={() => setEditingKeys((pre) => [...pre, item.key])} className={styles.editBtnStyle} icon={<CustomIcon str='pencil-line' />} />
                                    </div>
                                })}
                            </div>

                        </Checkbox.Group>

                    </div>
                </Col>
            </Row>
        </div>
    )
}

export default Notes